<template>
	<view class="collect-container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<tn-button style="color: black; width: 35px; height: 35px; font-size: 15px;" :border="false"
				@click="handleReturn">
				<text class="tn-icon-left" />
			</tn-button>
			<text class="title">我的收藏</text>
		</view>

		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-input">
				<text class="tn-icon-search"></text>
				<input type="text" v-model="searchKeyword" placeholder="搜索收藏的商品" @input="handleSearch" />
				<text class="tn-icon-close" v-if="searchKeyword" @tap="clearSearch"></text>
			</view>
		</view>

		<!-- 收藏列表 -->
		<view class="collect-list">
			<view v-for="(item, index) in filteredList" :key="index" class="collect-item" @click="goToDetail(item)">
				<!-- 商品图片 -->
				<image :src="item.picUrl || '/static/default-product.png'" class="product-image" mode="aspectFill" />
				<!-- 商品信息 -->
				<view class="product-info">
					<text class="product-name">{{item.name}}</text>
					<text class="product-brief">{{item.brief}}</text>
					<text class="product-price">¥{{item.counterPrice}}</text>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-if="filteredList.length === 0" class="empty-state">
			<text class="tn-icon-collection" style="font-size: 100rpx; color: #999;"></text>
			<text class="empty-text">{{searchKeyword ? '未找到相关商品' : '暂无收藏'}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collectList: [],
				loading: false,
				searchKeyword: '',
				searchTimer: null
			}
		},

		computed: {
			filteredList() {
				if (!this.searchKeyword) {
					return this.collectList;
				}
				const keyword = this.searchKeyword.toLowerCase();
				return this.collectList.filter(item =>
					item.name.toLowerCase().includes(keyword) ||
					item.brief.toLowerCase().includes(keyword)
				);
			}
		},

		onLoad() {
			this.loadCollectList();
		},

		methods: {
			// 返回上一页
			handleReturn() {
				uni.navigateBack({
					delta: 1
				});
			},

			// 处理搜索输入
			handleSearch() {
				// 防抖处理
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
				}
				this.searchTimer = setTimeout(() => {
					this.loadCollectList();
				}, 300);
			},

			// 清除搜索
			clearSearch() {
				this.searchKeyword = '';
				this.loadCollectList();
			},

			// 加载收藏列表
			async loadCollectList() {
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo.id === undefined) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.navigateTo({
						url: "/pages/Information/login/login"
					})
					return;
				}

				this.loading = true;
				try {
					const res = await uni.request({
						url: this.baseUrl + `/wx/collect/list/${userInfo.id}`,
						method: 'GET',
						data: {
							type: 0,
							page: 1,
							limit: 50,
							keyword: this.searchKeyword
						}
					});

					if (res.data.errno === 0) {
						this.collectList = res.data.data.list.map(item => ({
							...item,
							counterPrice: item.counterPrice || item.retailPrice || 0
						}));
						console.log('收藏列表:', this.collectList);
					} else {
						uni.showToast({
							title: res.data.errmsg,
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取收藏列表失败:', error);
					uni.showToast({
						title: '获取收藏列表失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},

			// 跳转到商品详情
			goToDetail(item) {
				uni.navigateTo({
					url: `/pages/index/productDetails/productDetails?id=${item.valueId}`
				});
			}
		}
	}
</script>

<style>
	.collect-container {
		padding-bottom: 30rpx;
		padding-top: var(--status-bar-height);
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: #fff;
		position: sticky;
		top: var(--status-bar-height); /* 固定位置时考虑状态栏高度 */
		z-index: 100;
		height: 80rpx;
	}

	.title {
		margin-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.collect-list {
		padding: 20rpx;
		padding-bottom: 120rpx; /* 增加底部内边距，防止内容被键盘遮挡 */
	}

	.collect-item {
		display: flex;
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.product-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
	}

	.product-info {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.product-name {
		font-size: 28rpx;
		font-weight: bold;
	}

	.product-brief {
		font-size: 24rpx;
		color: #666;
		margin: 10rpx 0;
	}

	.product-price {
		font-size: 32rpx;
		color: #ff4400;
		font-weight: bold;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}

	.empty-text {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #999;
	}

	/* 搜索框样式 */
	.search-box {
		padding: 20rpx;
		background-color: #fff;
		position: sticky;
		top: calc(var(--status-bar-height) + 80rpx); /* 导航栏高度 + 状态栏高度 */
		z-index: 99;
	}

	.search-input {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
	}

	.search-input .tn-icon-search {
		font-size: 32rpx;
		color: #999;
		margin-right: 10rpx;
	}

	.search-input input {
		flex: 1;
		height: 60rpx;
		font-size: 28rpx;
	}

	.search-input .tn-icon-close {
		font-size: 32rpx;
		color: #999;
		padding: 10rpx;
	}

	/* 调整列表上边距 */
	.collect-list {
		padding-top: 0;
	}
</style>